<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

onMounted(() => {
    if (chartRef.value) {
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(chartRef.value);
        // 绘制图表
        myChart.setOption({
            backgroundColor: '#bcddff0f', // 图表背景颜色（深蓝色）
            title: {
                // text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['1', '2', '3', '4', '5', '6'],
                axisLabel: {
                    color: '#ffefef',// 设置横坐标字体颜色为深灰色
                    fontSize: 14,       // 字体大小（px）
                    fontWeight: 'bold'
                }
            },
            yAxis: {
                axisLabel: {
                    color: '#ffefef',// 设置横坐标字体颜色为深灰色
                    fontSize: 10,       // 字体大小（px）
                    fontWeight: 'bold'
                }
            },
            series: [
                {
                    name: '销量',
                    type: 'line',
                    smooth: true,
                    data: [5, 20, 76, 50, 10, 20],
                    lineStyle: {
                        color: '#004ce3',      // 曲线颜色（亮蓝色）
                        width: 3,             // 曲线粗细（px）
                        type: 'solid',        // 线条类型（solid/dashed/dotted）
                        opacity: 0.8,         // 透明度（0-1）
                        shadowBlur: 10,       // 阴影模糊度
                        shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
                    },
                }
            ]
        });
    }
});

// 窗口大小变化时重绘图表
const handleResize = () => {
    myChart?.resize();
};

window.addEventListener('resize', handleResize);

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    // 销毁图表实例
    myChart?.dispose();
    myChart = null;
});
</script>

<template>
    <div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>